<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
      //请求所有的商品列表数据
    function getGoodsList(url, pagenum, pagesize) {
      return new Promise((resolve, reject) => {
        let userStr = sessionStorage.getItem('user')
        let user = JSON.parse(userStr)
        $('.title').html('欢迎您:' + user.username)
        let token = user.token
        $.ajax({
          url,
          type: 'GET',
          data: { pagenum, pagesize },
          //token是登录后保存是数据，在此处请求中必须携带的验证令牌，如果没有就会返回`无效token`
          headers: { Authorization: token },
          success(res) {
            resolve(res)
          },
          error(e) {
            reject(e)
          }
        })
      })
    }

    //拼接商品到页面
    function appendGoods(goodsList) {
      let app = $('#app')
      let ul = $('<ul></ul>')
      for (let i = 0, len = goodsList.length; i < len; i++) {
        let li = `
          <li><span>${goodsList[i].goods_id}</span>----<span>${goodsList[i].goods_name}</span>----<span>${'$' + goodsList[i].goods_price}</span></li>
        `
        ul.append(li)
      }
      app.append(ul)
    }

    $(async function() {
      //请求所有的商品列表数据
      try {
        let { data: res } = await getGoodsList(`http://192.168.102.5:8888/api/private/v1/goods`, 1, 20)
        appendGoods(res.goods)
      } catch (e) {
        console.log(e)
      }
    })
    </script>
</head>
<body>
    <div id="app">
        <h3 class="title"></h3>
    </div>
</body>
</html>